import React from 'react';
import { Form, Input } from 'antd';
import { PlanInfoProps } from '../types';
import styles from './index.less';

const { TextArea } = Input;

const PlanInfo: React.FC<PlanInfoProps> = ({ 
  planInfo, 
  summary, 
  onSummaryChange,
  loading 
}) => {
  return (
    <div className={styles['form-section']}>
      <div className={styles['form-row']}>
        <label className={styles['form-label']}>投产规划名称</label>
        <div className={styles['form-field']}>
          <Input 
            className={styles['form-control']}
            value={planInfo.planName} 
            readOnly 
            disabled={loading}
          />
        </div>
        
        <label className={styles['form-label']}>投产规划编号</label>
        <div className={styles['form-field']}>
          <Input 
            className={styles['form-control']}
            value={planInfo.planCode} 
            readOnly 
            disabled={loading}
          />
        </div>
      </div>
      
      <div className={styles['form-row']}>
        <label className={styles['form-label']}>申报中心</label>
        <div className={styles['form-field']}>
          <Input 
            className={styles['form-control']}
            value={planInfo.department} 
            readOnly 
            disabled={loading}
          />
        </div>
        
        <label className={styles['form-label']}>投产计划实施时间</label>
        <div className={styles['form-field']}>
          <Input 
            className={styles['form-control']}
            value={planInfo.implementationTime} 
            readOnly 
            disabled={loading}
          />
        </div>
      </div>
      
      <div className={styles['form-row']}>
        <label className={`${styles['form-label']} ${styles['required']}`}>投产规划摘要</label>
        <div className={styles['form-field']} style={{ flex: 3 }}>
          <TextArea 
            className={styles['form-control']}
            value={summary}
            onChange={(e) => onSummaryChange(e.target.value)}
            rows={4}
            disabled={loading}
          />
        </div>
      </div>
    </div>
  );
};

export default PlanInfo; 